.band_details {
  padding: 35rpx;

  .text_box {
    background-color: #fff;
    margin: 35rpx 0;
    width: auto !important;
    border-radius: 20rpx;
    padding: 20rpx;
    font-size: 22rpx !important;
  }

  .top_box {
    margin: 0 25rpx;
    padding: 45rpx 0;
    border-bottom: 1rpx solid #D2D2D2;

    .top_item {
      font-size: 30rpx;
      line-height: 60rpx;
    }

    .small_item {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  .bottom_box {
    margin-top: 100rpx;

    .tab_list {
      display: flex;
      font-size: 25rpx;

      .tab_item {
        padding: 15rpx;
        border-radius: 0 20rpx 0 0;
        width: 110rpx;
        text-align: center;
        white-space: nowrap;
      }

      .current_tab {
        font-weight: 900;
        font-size: 26rpx;
        color: #D4A04A;
      }

      :nth-child(1) {
        background-color: #fff;
        position: relative;
        z-index: 3;
      }

      :nth-child(2) {
        background-color: #D8E9E3;
        position: relative;
        z-index: 2;
        left: -10rpx;
      }

      :nth-child(3) {
        background-color: #FFEBD0;
        position: relative;
        z-index: 1;
        left: -20rpx;
      }

      :nth-child(4) {
        background-color: #D7E8D5;
        position: relative;
        z-index: 1;
        left: -25rpx;
      }

      :nth-child(5) {
        background-color: #FFF9EB;
        position: relative;
        z-index: 1;
        left: -30rpx;
      }
    }

    .button {
      background-color: #4AA568;
      color: #fff;
      padding: 20rpx 30rpx;
      border-radius: 60rpx;
      font-size: 27rpx;
      font-weight: 900;
      white-space: nowrap;
      margin-top: 35rpx;
      width: 280rpx;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }

    .button_none {
      background-color: #707070;
    }

    .bottom_content {
      box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.3);
    }

    .sign_in {
      text-align: center;

      .inner_box {
        padding: 140rpx 0;

        .toast {
          color: #707070;
          font-size: 22rpx;
        }

        .time {
          font-size: 22rpx;
          margin-top: 20rpx;
        }
      }
    }

    .roll_call {
      background-color: #D8E9E3;
      padding-bottom: 50rpx;

      .type_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20rpx 30rpx;
        padding-bottom: 0;

        .type_item {
          font-size: 22rpx;
          margin: 0 20rpx;
          white-space: nowrap;
          margin-bottom: 10px;
        }

        .current_type_item {
          font-weight: 900;
        }
      }

      .name_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 15rpx;
        padding-bottom: 45rpx;

        .name_item {
          flex: 1;
          margin: 0 5rpx;
          margin-top: 45rpx;
          color: #fff;
          text-align: center;
          background-color: #336CFE;
          font-size: 24rpx;
          padding: 20rpx 30rpx;
          border-radius: 20rpx;
          min-width: 20%;
          max-width: 23%;
        }

        .name_item_none {
          color: #fff;
          background-color: #B0BCBC;
        }

        .name_item_leave {
          color: #B0BCBC;
          background-color: #fff;
        }
      }

    }

    .homework {
      padding-top: 10rpx;
      padding-bottom: 35rpx;
      background-color: #FFEBD0;

      .text_box {
        margin: 35rpx;
      }
    }

    .feedback {
      background-color: #D7E8D5;
      padding: 50rpx 35rpx;

      .title {
        font-size: 30rpx;
        color: #000;
        margin-top: 10rpx;
      }

      .fraction_pr {
        margin-bottom: 20rpx;
      }

      .feedback_text {
        font-size: 22rpx;
        margin-top: 30rpx;
        padding-bottom: 50rpx;
        margin-bottom: 60rpx;
      }

      .feedback_img {
        width: 100%;
      }

      .bottom_line {
        border-bottom: solid 1rpx #B9C7B7;
      }
    }

    .review {
      background-color: #FFF9EB;

      .review_list {
        padding: 35rpx;

        .review_item {
          display: flex;
          justify-content: space-between;
          padding: 15rpx 0;
          border-bottom: solid 1rpx #c3c3c3;

          .review_left {
            .course {
              font-size: 30rpx;
            }

            .name {
              font-size: 24rpx;
              color: #707070;
              margin-top: 30rpx;
            }
          }

          .review_right {
            .time {
              font-size: 24rpx;
              color: #707070;
              text-align: center;
            }

            .review_button {
              margin-top: 15rpx;
              background-color: #D4A04A;
              color: #fff;
              padding: 20rpx 0;
              border-radius: 60rpx;
              font-size: 27rpx;
              font-weight: 900;
              white-space: nowrap;
              text-align: center;
              width: 240rpx;
            }

            .review_button_ok {
              background-color: #B0BCBC;
            }
          }
        }
      }
    }
  }
}